<!-- templates/schedule_detail_modal.html -->

<!-- 排课详情 Modal -->
<div class="modal fade" id="scheduleDetailModal" tabindex="-1" aria-labelledby="scheduleDetailLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <!-- 标题栏 -->
            <div class="modal-header">
                <h5 class="modal-title" id="scheduleDetailLabel">
                    <i class="bi bi-info-circle-fill me-2"></i>排课详情
                </h5>
                <span id="detailErrorMsg" class="text-danger ms-3" style="display:none; font-size:0.9rem;"></span>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <!-- 内容 -->
            <div class="modal-body">
                <dl class="row mb-0">
                    <dt class="col-sm-4">学生姓名</dt>
                    <dd class="col-sm-8" id="detail-student"></dd>

                    <dt class="col-sm-4">课程名</dt>
                    <dd class="col-sm-8" id="detail-course"></dd>

                    <dt class="col-sm-4">学校</dt>
                    <dd class="col-sm-8" id="detail-school"></dd>

                    <dt class="col-sm-4">年级</dt>
                    <dd class="col-sm-8" id="detail-grade"></dd>

                    <dt class="col-sm-4">家庭住址</dt>
                    <dd class="col-sm-8" id="detail-address"></dd>

                    <dt class="col-sm-4">每节学费</dt>
                    <dd class="col-sm-8" id="detail-fee"></dd>

                    <dt class="col-sm-4">排课状态</dt>
                    <dd class="col-sm-8" id="detail-status"></dd>

                    <dt class="col-sm-4">日期</dt>
                    <dd class="col-sm-8" id="detail-date"></dd>

                    <dt class="col-sm-4">开始时间</dt>
                    <dd class="col-sm-8" id="detail-start"></dd>

                    <dt class="col-sm-4">结束时间</dt>
                    <dd class="col-sm-8" id="detail-end"></dd>

                    <dt class="col-sm-4">备注</dt>
                    <dd class="col-sm-8" id="detail-remark"></dd>
                </dl>
            </div>

            <!-- 底部操作 -->
            <div class="modal-footer">
                <div id="detail-delete-container" style="position:relative;">
                    <button id="detail-delete" type="button" class="btn btn-danger">删除</button>
                    <div id="delete-options" style="
            display: none;
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            flex-direction: column;
            gap: 0.25rem;
            padding: 0.5rem;
            background: #fff;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
            z-index: 10;
          ">
                        <div id="opt-once" class="option-btn delete-once">本次</div>
                        <div id="opt-ongoing" class="option-btn delete-ongoing">本次及后续</div>
                    </div>
                </div>
                <div id="detail-modify-container" style="position:relative;">
                    <button id="detail-modify" type="button" class="btn btn-primary">修改</button>
                    <div id="modify-options">
                        <div id="opt-modify-once" class="option-btn modify-once">本次</div>
                        <div id="opt-modify-ongoing" class="option-btn modify-ongoing">本次及后续</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 确认对话框 Modal -->
<div class="modal fade" id="confirmModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center">
                <p id="confirmMessage">确认操作？</p>
                <div class="mt-3 d-flex justify-content-center">
                    <button id="confirmOk" class="btn btn-danger">确认</button>
                    <button id="confirmCancel" class="btn btn-secondary ms-2" data-bs-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>
